<template>
    <view class="cart-item">
        <view class="">
            <view class="flex-v-c supplier-box" @click="goSupplierPage">
                <label class="item-radio" v-if="isShowCheckBox" @click.stop="changeSupplierCheck(isSelect)">
                    <custom-checkbox :isSelect="isSelect"></custom-checkbox>
                </label>
                <text class="iconfont icon-dianpu"></text>
                <text class="supplier-name">{{ productInfo.SupplierName || "总部" }}</text>
                <text class="iconfont icon-xiayiji"></text>
            </view>
        </view>
        <cart-item
            v-for="(item, index) in productInfo.ProductItems"
            :key="item.ProductId"
            :selectData="selectData"
            :productInfo="item"
            :isEdit="isEdit"
            @upNum="upNum"
            @changeCheck="changeCheck"
            @checkboxChange="checkboxChange"
            @delTip="delTip"
            >{{ item.name }}</cart-item
        >
    </view>
</template>

<script>
import cartItem from "@/pages_supplier/components/cart/cart-item.vue"
import customCheckbox from "@/components/common/custom-checkbox.vue"
export default {
    components: {
        cartItem,
        customCheckbox,
    },
    props: {
        productInfo: {
            type: Object,
            default: {},
        },
        selectData: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            checkIds: "",
            isSelect: false,
            subIds: [],
        }
    },
    watch: {
        selectData(e) {
            this.isSelectFn(e)
        },
        isEdit(e) {
            this.isSelectFn(this.selectData)
        },
    },
    mounted() {
        this.isSelectFn(this.selectData)
    },
    methods: {
        isSelectFn(data) {
            let ids = data.ids
            let subIds = []
            this.productInfo.ProductItems.forEach((pro) => {
                pro.SubItems.forEach((sub) => {
                    if (sub.SaleStatus == 1 || this.isEdit) {
                        subIds.push(String(sub.ID))
                    }
                })
            })
            this.subIds = subIds
            let newList = []
            subIds.filter((val) => {
                if (ids.includes(String(val))) {
                    newList.push(val)
                }
            })
            this.isSelect = newList.length > 0 && newList.length == subIds.length
        },
        goSupplierPage() {
            if (this.productInfo.SupplierId) {
                this.easyGoTo("/pages_supplier/packet/supplier/detail?id=" + this.productInfo.SupplierId)
            }
        },
        upNum(e) {
            this.$emit("upNum", this.productInfo)
        },
        changeSupplierCheck(isSelect) {
            let obj = {
                isSelect: !isSelect,
                supplierId: this.productInfo.SupplierId,
                subIds: this.subIds,
            }
            this.$emit("changeSupplierCheck", obj)
        },
        changeCheck(e) {
            this.$emit("changeCheck", e)
        },
        checkboxChange(e, id) {
            this.$emit("checkboxChange", e, id)
        },
        delTip(e) {
            this.$emit("delTip", e)
        },
    },
}
</script>

<style lang="scss" scoped>
.cart-item {
    background: $color-white;
    padding: 11rpx $app-page-padding;
    border-radius: $border-radius-10;
    margin-top: 20rpx;
}
.item-radio {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
}
.supplier-box {
    padding: 6px 0;
    .checkbox {
        width: 40rpx;
        height: 40rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        border: 2rpx solid #b2b2b2;
        margin-right: 14rpx;
        position: relative;
    }
    .checkbox-active {
        color: $app-color-main;
        background: $app-color-main;
        border-color: currentColor;
        &:after {
            content: "";
            position: absolute;
            width: 16rpx;
            height: 8rpx;
            border: 4rpx solid;
            border-color: transparent transparent #fff #fff;
            transform: rotate(-45deg);
            left: 8rpx;
            top: 6rpx;
        }
    }
    .icon-dianpu {
        font-size: 32rpx;
        margin-right: 10rpx;
    }
    .supplier-name {
        font-size: 30rpx;
    }
}
</style>
